<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>统一地图平台</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
        html,
        body,
        #mapui {
            width: 100%;
            height: 100%;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="mapui"></div>

    <script src="./js_example/script/map.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    <script src="./js_thematic_map_example/script/jq/jquery.min.js"></script>
    <script>
        var amap = null;
        var that = this;
        var data = [];
        var timeData = [];
        map.Factory.create('mapui', {
            center: [106.17609405517578, 35.41583177128595],
            fullExtent: {
                xmin: 90.992204,
                ymin: 10.979711,
                xmax: 120.5338915,
                ymax: 50.543712
            },
            zoom: 3,
            projection: 'EPSG:4326',
            strategy: ['mapboxgl', 'openlayers'],
            style: style
        }, (o) => {
            amap = o;
            map.Factory.loadSpecialMap('mapv' , () =>{
                that.init(amap);
            })
        });


        function init(map) {

            // 构造数据
            $.ajax({
                url: './js_thematic_map_example/data/qianxi-time',
                success: function (rs) {
                    var items = rs.split('|');
                    for (var i = 0; i < items.length; i++) {
                        var itemArr = items[i].split(/\n/);
                        for (var k = 0; k < itemArr.length; k++) {
                            if (!!itemArr[k]) {
                                var item = itemArr[k].split(/\t/);
                                if (item[0] === '起点城市' || item[0] === '迁出城市') {
                                    var cityBegin = item[1];
                                }
                                if (item[0] !== '起点城市' || item[0] !== '迁出城市' && item.length > 1) {
                                    var cityCenter1 = special_mapv.utilCityCenter.getCenterByCityName(item[0].replace(/市|省/, ""));
                                    var cityCenter2 = special_mapv.utilCityCenter.getCenterByCityName(cityBegin.replace(/市|省/, "").trim());
                                    if (cityCenter1) {
                                        if (Math.random() > 0.7) {
                                            curive(cityCenter2, cityCenter1, 50);
                                        }
                                        data.push({
                                            geometry: {
                                                type: 'LineString',
                                                coordinates: [[cityCenter1.lng, cityCenter1.lat], [cityCenter2.lng, cityCenter2.lat]]
                                            },
                                            count: 100 * Math.random()
                                        });
                                    }
                                }
                            }
                        }
                    }

                    var dataSet = new special_mapv.DataSet(data);
                    var options = {
                        strokeStyle: 'rgba(55, 50, 250, 0.3)',
                        globalCompositeOperation: 'lighter',
                        shadowColor: 'rgba(55, 50, 250, 0.5)',
                        methods: {
                            click: function (item) {
                            }
                        },
                        gradient: { 0: 'rgba(55, 50, 250, 0)', 1: 'rgba(55, 50, 250, 1)' },
                        lineWidth: .2,
                        draw: 'intensity'
                    };

                    var mapvLayer = new special_mapv.FmLayer(map, dataSet, options);

                    var dataSet = new special_mapv.DataSet(timeData);
                    var options = {
                        fillStyle: 'rgba(255, 250, 250, 0.9)',
                        size: .5,
                        animation: {
                            type: 'time',
                            stepsRange: {
                                start: 0,
                                end: 50
                            },
                            trails: 1,
                            duration: 5,
                        },
                        draw: 'simple'
                    };
                    var mapvLayer = new special_mapv.FmLayer(map, dataSet, options);
                }
            });

        }

        function curive(fromPoint, endPoint, n) {
            var delLng = (endPoint.lng - fromPoint.lng) / n;
            var delLat = (endPoint.lat - fromPoint.lat) / n;

            for (var i = 0; i < n; i++) {
                var pointNLng = fromPoint.lng + delLng * i;
                var pointNLat = fromPoint.lat + delLat * i;
                timeData.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [pointNLng, pointNLat]
                    },
                    count: 1,
                    time: i
                });
            }
        }
    </script>
</body>

</html>